﻿@{
	ViewBag.Title = "职位发布查询";
}

<script src="~/lib/vue/dist/vue.global.js"></script>
<script src="~/lib/axios/dist/axios.js"></script>
<link href="~/lib/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/lib/element-plus/dist/index.full.js"></script>

<div id="app">

	<table width="90%" cellpadding="5" cellspacing="0" style="margin-bottom:40px">
		<tr>
			<td>
				<font color="black">您正在做的业务是：人力资源--招聘管理--职位发布管理--职位发布查询 </font>
			</td>
		</tr>
		<tr>
			<td align="left">
				<font color="black">当前可变更是职位发布总数：{{pageSize}}例 </font>
			</td>
		</tr>
	</table>
	<div>
		<!-- 表格内容 -->
		<el-table :data="tableData"  style="width: 100%">
			<!-- 表格列 -->
			<el-table-column prop="majorName" label="职位名称"></el-table-column>
			<el-table-column prop="thirdKindName" label="公司名称"></el-table-column>
			<el-table-column prop="humanAmount" label="招聘人数"></el-table-column>
			<el-table-column prop="registTime" label="发布时间"></el-table-column>
			<el-table-column prop="deadline" label="截止时间"></el-table-column>

			<el-table-column label="申请职位">
				<!-- 自定义操作列 -->
				<template #default="scope">
					<el-button link type="primary" size="small" v-on:click="update(scope.row)">申请该职位</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
	<!-- 分页 -->
	<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[2, 4, 6, 8]"
				   :small="small" :disabled="disabled" :background="background"
				   layout="total, sizes, prev, pager, next, jumper" :total="pageSize" v-on:size-change="handleSizeChange"
				   v-on:current-change="handleCurrentChange">
	</el-pagination>

</div>


<script type="text/javascript">
	const { createApp, ref, reactive } = Vue
	var app = createApp({
		setup() {

			let tableData = ref([]);

			let small = ref(false);
			let currentPage = ref(1);
			let pageSize = ref(3);
			let totalCount = ref(0);
			let background = ref(false);
			let disabled = ref(false);

			//窗体加载分页
			function fill() {
				axios.get('/EMR/GetEMRFy', {
					params: {
						currentPage: currentPage.value,
						pageSize: pageSize.value,
					}
				})
					.then(res => {
						console.log(res.data);
						tableData.value = res.data.emRs;
						pageSize.value = res.data.totalCount;
					})
					.catch(err => {
						console.log(err);
					})

			};

			function handleSizeChange(size) {
				pageSize.value = size;
				fill();
			}
			function handleCurrentChange(page) {
				currentPage.value = page;
				fill();
			}

			//删除事件
			const sc = (ftkId) => {
				axios.delete('/EMR/DeleteEMR/' + ftkId)
					.then(res => {
						if (res.data > 0) {
							fill();
						}
					})
					.catch(err => {
						console.log(err);
					})
			}
			//修改
			function update(row) {
				let queryString = '?';
				// 遍历row对象的每个属性，并将其添加到查询字符串中
				for (let key in row) {
					if (row.hasOwnProperty(key)) {
						queryString += encodeURIComponent(key) + '=' + encodeURIComponent(row[key]) + '&';
					}
				}
				// 去除最后一个 '&'
				queryString = queryString.slice(0, -1);
				// 构建完整的跳转 URL
				let destination = '/EMR/EMR' + queryString;
				// 跳转到新页面
				window.location.href = destination;
			}



			fill();
			return {
				tableData,
				currentPage,
				pageSize,
				small,
				totalCount,
				background,
				disabled,
				fill,
				handleSizeChange,
				handleCurrentChange,
				sc,
				update
			}
		}
	});
	app.use(ElementPlus)
	app.mount('#app')

</script>

<style scoped>

</style>
